<template>
	<div class="Home">
		<div class="sidebar">
			<div class="sidebar_top">
				<div
					class="icon_box"
					v-for="item in sidebar_dict.top"
					:key="item.name"
					@click="sidebar_top_clcik(item)"
					:class="{ is_active: item.is_active }">
					<span
						class="iconfont"
						:class="item.icon"></span>
				</div>
			</div>
			<div class="sidebar_bottom">
				<el-popover
					placement="right"
					trigger="click">
					<template #reference>
						<div
							class="icon_box"
							v-for="item in sidebar_dict.bottom"
							:key="item.name">
							<span
								class="iconfont"
								:class="item.icon"></span>
						</div>
					</template>
					<div class="setting">
						<div @click="open_console">打开控制台</div>
					</div>
				</el-popover>
			</div>
		</div>
		<div class="main">
			<router-view />
		</div>
	</div>
</template>
<script setup>
	import { ref, onBeforeMount } from "vue";
	import { useRouter } from "vue-router";
	import { useIndexStore } from "@/store/model/index";
	import { Events } from "@/utils/events_bus/index.js";

	const router = useRouter();
	const store = useIndexStore();

	const sidebar_dict = ref({});

	onBeforeMount(() => {
		sidebar_dict.value = store.config.sidebar_dict;
		init_sidebar_dict();
	});

	const init_sidebar_dict = () => {
		sidebar_dict.value.top.forEach(item => {
			if (item.is_active) {
				router.push({ path: item.path });
			}
		});
	};

	const update_top_is_active = name => {
		sidebar_dict.value.top.forEach(item => {
			if (item.name === name) {
				item.is_active = true;
				router.push({ path: item.path });
			} else {
				item.is_active = false;
			}
		});
	};

	const sidebar_top_clcik = item => {
		switch (item.name) {
			case "list":
				if (item.is_active) {
					store.set_list_is_active();
				} else {
					update_top_is_active(item.name);
				}
				break;
			default:
				update_top_is_active(item.name);
				break;
		}
	};
	const open_console = () => {
		Events.send_reply("open_console");
	};
</script>

<style scoped lang="less">
	.Home {
		width: 100%;
		height: 100%;
		display: flex;
		--sidebar-width: 60px;

		.sidebar {
			width: var(--sidebar-width);
			height: 100%;
			box-sizing: border-box;
			border-right: var(--split-line);
			flex-shrink: 0;
			background-color: var(--sidebar-bg);
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.sidebar_top,
			.sidebar_bottom {
				.icon_box {
					width: 100%;
					height: 59px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					&:hover {
						.iconfont {
							color: var(--sidebar-icon-hover-color);
						}
					}

					.iconfont {
						font-size: 30px;
						color: var(--sidebar-icon-color);
					}
				}
			}

			.sidebar_top {
				.is_active {
					box-sizing: border-box;
					border-left: 2px solid var(--sidebar-icon-active-color);

					.iconfont {
						color: var(--sidebar-icon-active-color);
					}
				}
			}
		}

		.main {
			width: calc(100% - var(--sidebar-width));
			height: 100%;
			background-color: #fff;
		}
	}
</style>
